<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="/static/base/common/css/sapar.css" />
    <link rel="stylesheet" type="text/css" href="/static/base/common/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/static/webjars/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/command/map.css"/>
    <script type="text/javascript" src="/static/webjars/layui/layui.js"></script>
    <script type="text/javascript" src="/static/base/common/js/jquery.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
    <title>${titleName}</title>
</head>
<body>
    <div id="saper-container" style="height:100%;">
    <div id="saper-hd"></div>
    <div id="saper-bd" style="height:100%;">
        <div class="subfiled clearfix">
            <h2>${titleName}</h2>
        </div>
        <div class="search">
            搜索：
            <div class="layui-inline" style="width:90%;">
                <input class="layui-input"  id="suggestId" autocomplete="off"  placeholder="请输入需要所有的地点" style="width:50%;"/>
            </div>
        </div>
        <div id="mapContainer"></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        <div id="notification">
            <div class="layui-card">
                <div class="layui-card-header">最新消息</div>
                <div class="layui-card-body">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="saper-ft"></div>
</div>
</body>
    <script type="text/javascript">

        //创建地图
        var map = new BMap.Map("mapContainer");         // 创建地图实例
        var point = new BMap.Point(105.245851,28.310923);    // 创建点坐标
        map.centerAndZoom(point, 11);                   // 设置缩放度
        map.enableScrollWheelZoom();                  //启用滚轮放大缩小


        //启动卫星自动定位到当前位置
        /* var geolocation = new BMap.Geolocation();
         geolocation.getCurrentPosition(function(r){
             if(this.getStatus() == BMAP_STATUS_SUCCESS){
                 map.panTo(r.point);
             }
             else {
                 alert('failed'+this.getStatus());
             }
         },{enableHighAccuracy: true});*/

        //初始化地图搜索框
        function G(id) {
            return document.getElementById(id);
        }
        // 编写自定义函数,创建标注
        function addMarker(pt,num){
            var marker = new BMap.Marker(pt);
            map.addOverlay(marker);
            marker.addEventListener("click",function(){
                showInfo(this,num);
            });
        }
        function showInfo(mark,msg){
            window.location.href="/business/detail?id="+msg
        }
        //异步请求并显示所有地图点 并添加点击事件
        $.getJSON("/ajax/business/findAllReport",function(data){
            data.forEach(function(item){
                var pt = new BMap.Point(item.lng,item.lat);
                addMarker(pt,item.id);
            });
        });

        var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {   "input" : "suggestId"
                ,"location" : map
            });

        ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
            var str = "";
            var _value = e.fromitem.value;
            var value = "";
            if (e.fromitem.index > -1) {
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str = "FromItem&lt;br />index = " + e.fromitem.index + "&lt;br />value = " + value;

            value = "";
            if (e.toitem.index > -1) {
                _value = e.toitem.value;
                value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            }
            str += "&lt;br />ToItem&lt;br />index = " + e.toitem.index + "&lt;br />value = " + value;
            G("searchResultPanel").innerHTML = str;
        });

        var myValue;
        ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
            var _value = e.item.value;
            myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
            G("searchResultPanel").innerHTML ="onconfirm&lt;br />index = " + e.item.index + "&lt;br />myValue = " + myValue;

            setPlace();
        });

        function setPlace(){
            map.clearOverlays();    //清除地图上所有覆盖物
            function myFun(){
                var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                map.centerAndZoom(pp, 18);
                map.addOverlay(new BMap.Marker(pp));    //添加标注
            }
            var local = new BMap.LocalSearch(map, { //智能搜索
                onSearchComplete: myFun
            });
            local.search(myValue);
        }

        //异步请求，获取最新的消息
        $.getJSON("/ajax/business/lastMsg",function(data){
            data.forEach(function(item){
                $("#notification .layui-card-body >ul").append("<li><a href='javascript:void(0);' data-item='"+item.ctReport.id+"'>"+item.ctReport.title+"</a></li>");
            });

            /*点击最新事件信息*/
            $("#notification .layui-card-body>ul li a").click(function(){
                var id = $(this).attr("data-item");
                window.location.href="/business/detail?id="+id;
            });
        });

        //鼠标获取事件 不准添加标注到地图中
        /*   map.addEventListener("click",function(e){
               map.clearOverlays();
               var marker = new BMap.Marker(e.point);      // 创建标注
               map.addOverlay(marker);                     // 将标注添加到地图中
           });*/
    </script>
</html>